import React, { useState, useEffect } from 'react';
import { Sbtn, Time } from 'base/ctl/base';
import { Title, BtnVal } from 'base/ctl/title';
import { DlgTech } from './ctl/tech';
import { DlgInput } from './ctl/input';
import { load_setting, set_setting } from './cmd';
import { obj_str, Wait } from 'sui';

const SettingView = ({ high, wsn, hreturn }) => {
    const [open_tech, openTech] = useState(false);
    const [open_num, openNum] = useState(false);
    const [wait, setWait] = useState(false);
    const [cur, setCur] = useState();
    const [main, setMain] = useState();
    const [err, setErr] = useState();

    useEffect(() => {
        load_setting(setMain);
        setErr("");
    }, []);

    const hValue = (v) => {
        const tmp = parseFloat(v);
        if (isNaN(tmp)) {
            setErr("请输入数值");
            return;
        }

        const val = {};
        val[cur] = tmp;

        setErr("");
        set_setting(val, setMain, setWait, setErr);
    };

    const hTech = (v) => {
        const val = {};

        val["tech"] = v.sn;
        val["out_w_tech"] = v.width;
        val["out_dia_tech"] = v.dia;

        const set = new Set();
        set.add(v.sn);

        const ret = [v];

        if (main) {
            const old = main["recent"];
            if (old) {
                old.forEach(d => {
                    if (ret.length > 5) {
                        return;
                    }

                    const sn = obj_str(d, "sn");
                    if (set.has(sn)) {
                        return;
                    }

                    ret.push(d);
                });
            }
        }

        val["recent"] = ret;

        set_setting(val, setMain, setWait, setErr);
    };

    const hAction = (k) => {
        setCur(k);
        if (k === "tech") {
            openTech(true);
        } else {
            openNum(true);
        }
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <div className="inline-flex items-center">
                    <Title value={wsn} sub="宽度与外圆 >> 设置" width="w-px-300"/>
                </div>
                <div className="inline-flex mr-4">
                    <Sbtn cl="blue" label="返回" hcmd={hreturn}/>
                </div>
            </div>
            <div className="inline-flex mt-4 items-center mb-4">
                <BtnVal cl="blue" label="工艺" hcmd={() => hAction("tech")} value={obj_str(main, "tech")} width="w-56"/>
                <BtnVal cl="blue" label="测量延迟 ( 秒 )" hcmd={() => hAction("start")} value={obj_str(main, "start")} width="w-20"/>
                <BtnVal cl="blue" label="测量时间 ( 秒 )" hcmd={() => hAction("keep")} value={obj_str(main, "keep")} width="w-20"/>
                <BtnVal cl="blue" label="标定间隔" hcmd={() => hAction("num")} value={obj_str(main, "num")} width="w-20"/>
            </div>
            <div className="flex flex-row items-start mb-2 w-full">
                <div style={{ height: `${high - 200}px` }} className="mr-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-indigo-700 py-2"><span className="ml-4">宽度设置</span></div>
                    <Title value={obj_str(main, "out_w_tech")} sub="公称尺寸 ( 毫米 )" width="w-56" className="ml-8 mt-4 mb-8"/>
                    <div>
                        <BtnVal cl="indigo" label="校零值 ( 毫米 )" hcmd={() => hAction("out_w_zero")} value={obj_str(main, "out_w_zero")} className="mb-8"/>
                        <BtnVal cl="indigo" label="上偏差 ( 毫米 )" hcmd={() => hAction("out_w_up")} value={obj_str(main, "out_w_up")} className="mb-8"/>
                        <BtnVal cl="indigo" label="下偏差 ( 毫米 )" hcmd={() => hAction("out_w_down")} value={obj_str(main, "out_w_down")} className="mb-8"/>
                    </div>
                </div>
                <div style={{ height: `${high - 200}px` }} className="mx-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-teal-700 py-2"><span className="ml-4">外圆设置</span></div>
                    <Title value={obj_str(main, "out_dia_tech")} sub="公称尺寸 ( 毫米 )" width="w-56" className="ml-8 mt-4 mb-8"/>
                    <div>
                        <BtnVal cl="teal" label="校零值 ( 毫米 )" hcmd={() => hAction("out_dia_zero")} value={obj_str(main, "out_dia_zero")} className="mb-8"/>
                        <BtnVal cl="teal" label="上偏差 ( 毫米 )" hcmd={() => hAction("out_dia_up")} value={obj_str(main, "out_dia_up")} className="mb-8"/>
                        <BtnVal cl="teal" label="下偏差 ( 毫米 )" hcmd={() => hAction("out_dia_down")} value={obj_str(main, "out_dia_down")} className="mb-8"/>
                    </div>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{err}</div>
                </div>
                <div className="flex justify-center ml-2 w-32">
                    <Time up={true}/>
                </div>
            </div>
            <DlgTech open={open_tech} setOpen={openTech} data={main} hcmd={hTech}/>
            <DlgInput open={open_num} setOpen={openNum} hcmd={hValue}/>
            <Wait wait={wait}/>
        </div>
    );
};

export {SettingView};
